Ext.onReady (function(){
	
	var getImageUrl='../hf/treeMenu.do?action=getImages';
	var basePath='/images/';
	var separator='/';
	
	var forwardArray=[];
	var backArray=[];
	var currentPath;
	
	backArray.push(basePath);
	
	var store = new Ext.data.JsonStore({
        url: getImageUrl,
        baseParams :{imageDir :basePath},
        root: 'images',
        fields: ['name', 'url','isDir'],
        id:'url'
    });
    store.load();
    
    var tplImage = new Ext.XTemplate(
		'<tpl for=".">',
			'<tpl if="isDir==false">',
            '<div class="thumb-wrap" id="{url}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
		    '</tpl>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);
	
	var tplDir = new Ext.XTemplate(
		'<tpl for=".">',
			'<tpl if="isDir==true">',
            '<div class="thumb-wrap" id="{url}">',
		    '<div class="thumbDir"><img src="../images/folder.gif" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
		    '</tpl>',
        '</tpl>',
        '<div class="x-clear"></div>'
	); 
    
    var imageView = new Ext.DataView({
            store: store,
            tpl: tplImage,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
			
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                return data;
            },
            
            listeners: {
            	click :{
            		fn: function(dv,index,node){
            			var data=dv.getRecord(node);
            			//imageView.setTitle('图片选择窗(您选择了'+data.data.name+')');
            		}
            	},
            	dblclick : {
            		fn: function(dv,index,node){
            			Ext.Msg.alert("消息",node.id);
            		}
            	}
            }
        });
    var dirView = new Ext.DataView({
            store: store,
            tpl: tplDir,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                return data;
            },
            
            listeners: {
            	click :{
            		fn: function(dv,index,node){
            			var data=dv.getRecord(node);
            			//dirView.setTitle('图片选择窗(您选择了'+data.data.name+')');
            		}
            	},
            	dblclick : {
            		fn: function(dv,index,node){         			
            			var data=dv.store.getById(node.id);
            			var pathParam=store.baseParams.imageDir+data.data.name+separator;
            			
            			commonLoad(pathParam);
            			
            			upButton.setDisabled(false);            			
            		}
            	}
            }
        });
   //panel.render(document.body);
    //加载store
   	function loadPath(pathParam){
   		store.baseParams.imageDir=pathParam;
   		store.load();
   		imageView.refresh();
        dirView.refresh();
        currentPath=pathParam;
        
        if (pathParam.indexOf(basePath) < 0 || pathParam == basePath) {
        	upButton.setDisabled(true);
        }else{
        	upButton.setDisabled(false);
        }
   	}
    
   	//非导航的加载数据
   	function commonLoad(pathParam) {
		// 把路径放入backArray中
		if (currentPath != null && currentPath !== '') {
			backArray.push(currentPath);
		}

		if (forwardArray != null && forwardArray.length != 0) {
			forwardArray = [];
		}
		loadPath(pathParam);

		forwardButton.setDisabled(true);
		backButton.setDisabled(false);
	}
   	
	var backButton = new Ext.Button({
		id : 'backButton',
		iconCls : 'x-tbar-page-prev',
		text : '后退',
		disabled : true,
		handler : function() {
			var pathParam = backArray.pop();
			if (pathParam != null) {
				// 处理当前显示的路径
				if (currentPath != null) {
					forwardArray.push(currentPath);
				}

				loadPath(pathParam);
				if(forwardButton.disabled){
					forwardButton.setDisabled(false);
				}
				
				if(backArray.length==0){
					backButton.setDisabled(true);
				}
				
			} else {
				return;
			}

		}
	});
	
	var forwardButton = new Ext.Button({
		id : 'forwardButton',
		iconCls : 'x-tbar-page-next',
		text : '前进',
		disabled : true,
		handler : function() {
			var pathParam = forwardArray.pop();
			if (pathParam != null) {

				// 处理当前显示的路径
				if (currentPath != null) {
					backArray.push(currentPath);
				}
				
				if(backButton.disabled){
					backButton.setDisabled(false);
				}
				
				if(forwardArray.length==0){
					forwardButton.setDisabled(true);
				}
				
				loadPath(pathParam);
			} else {
				return;
			}
		}
	});
	
	var upButton = new Ext.Button({
		id : 'upButton',
		iconCls : 'submit-image',
		text : '向上',
		disabled : true,
		handler : function() {
			//debugger;
			var pathParam;
			if (currentPath != null) {
				pathParam = currentPath.slice(0, -1);
				pathParam = pathParam.slice(0, pathParam.lastIndexOf(separator)
						+ 1);
			}
			
			commonLoad(pathParam);
		}
	});
	
	var pathData=[['images','/images/'],['resources','/resources/']];
	
	var pathStore=new Ext.data.SimpleStore({
		data:pathData,
		fields:['text','value']
	})
	
	var pathCombo=new Ext.form.ComboBox({
		store:pathStore,
		emptyText:'请选择...',
		triggerAction:'all',
		mode:'local',
		valueField:'value',
		
		displayField:'text'
	});
	
	
	
	pathCombo.on({
		 select:function(combo,record,index){
		 	if(basePath==record.data.value){
		 		return ;
		 	}else{
		 		basePath=record.data.value;
		 		loadPath(basePath);
		 	}
		 	
		 	
		 }
	});
	
	pathCombo.setValue('/images/');
        
    var vp=new Ext.Viewport({
	    layout: 'border',
	    items: [{
	    	cls:'images-view',
	    	split:true,
	    	useSplitTips:true,						//设置鼠标停留时是否有提示	
	    	collapsible: true,						//设置菜单右上角是否有可伸缩的按钮
	        collapseMode:'mini',					//设置折叠模式
	        region: 'north',
	        height:200,
	        title:'文件夹',
	        border: false,
	        autoScroll:true,        
	        items:[new Ext.Toolbar({
	        	id:'toolbar',
	        	items:[backButton,forwardButton,upButton,pathCombo]
	        }),dirView]
	    }, {
	    	cls:'images-view',
	        region: 'center',
	        height:200,
	        title:'图片',
	        border: false,
	        autoScroll:true,        
	        items:imageView
	    }]
	});
	
});